<template>
	<view class="page">
		<view class="orderlists">
			<view class="orderlist">
				<view class="register_info">
					<view class="title_status">
						<view class="title">
							登记号：20200101001598Z
						</view>
						<view class="status">
							已缴费
						</view>
					</view>
					<view class="depart_info">
						<view class="infos">
							就诊科室：门诊外一科
						</view>
						<view class="infos">
							开单医生：刘医师
						</view>
						<view class="infos">
							开单时间：2020-01-01 10:20:36
						</view>
						<view class="infos">
							开单金额：￥520.13
						</view>
						<view class="infos">
							订单号：2021010156256894
						</view>
					</view>
					<!-- 缴费详情 -->
					<view class="free_details">
						缴费详情 >
					</view>
				</view>
			</view>
			<view class="orderlist">
				<view class="register_info">
					<view class="title_status">
						<view class="title">
							登记号：20200101001582Z
						</view>
						<view class="status" style="background-color: rgba(255, 241, 240, 1);color: #FF4D4F;">
							已退费
						</view>
					</view>
					<view class="depart_info">
						<view class="infos">
							就诊科室：耳鼻喉科
						</view>
						<view class="infos">
							开单医生：刘医师
						</view>
						<view class="infos">
							开单时间：2020-01-01 10:20:36
						</view>
						<view class="infos">
							开单金额：￥520.13
						</view>
						<view class="infos">
							订单号：2021010156256894
						</view>
					</view>
					<!-- 缴费详情 -->
					<view class="free_details">
						缴费详情 >
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	.page{
		background-color: #f2f2f2;
		min-height: 100vh;
		padding: 36rpx 26rpx;
		box-sizing: border-box;
		.orderlists{
			.orderlist{
				background-color: #fff;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				.register_info{
					padding-top: 30rpx;
					padding-right: 32rpx;
					box-sizing: border-box;
					.title_status{
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-left: 28rpx;
						box-sizing: border-box;
						font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
						font-size: 24rpx;
						position: relative;
						.title{
							font-weight: 700;
						}
						.status{
							width: 100rpx;
							height: 40rpx;
							line-height: 40rpx;
							text-align: center;
							background-color: rgba(230, 255, 251, 1);
							border-radius: 8rpx;
							color: #13C2C2;
						}
					}
					.title_status:before{
						content: '';
						width: 8rpx;
						height: 36rpx;
						background-color: rgba(22, 119, 255, 1);
						border-radius: 16rpx;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
					.depart_info{
						margin-top: 24rpx;
						padding-left: 28rpx;
						box-sizing: border-box;
						padding-bottom: 32rpx;
						.infos{
							line-height: 40rpx;
							margin-top: 16rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							color: #333333;
						}
					}
					.free_details{
						width: 100%;
						height: 94rpx;
						border-top: 2rpx solid #f2f2f2;
						line-height: 94rpx;
						text-align: center;
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						color: #1677FF;
					}
				}
				
			}
		}
	}       
</style>
